import React, { Component } from 'react'

import {
  Button,
  DatePicker,
  Form,
  Input,
  Select,
  Table,
  Modal,
  message,
  Popconfirm,

} from 'antd';
import 'dayjs/locale/zh-cn';
// import dayjs from 'dayjs';
import locale from 'antd/es/date-picker/locale/zh_CN';

export default class Evaluate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      remarks: "",
      Time: "",
      State: "",
      Title: "",
      key: 10,
      componentSize: '',
      isModalOpen: false,
      ModalOpen: false,
      setComponentSize: '',
      index: "",
      Index: "",
      current: 1,
      pageSize: 4,
      showData: {
        remarks: "",
        Time: "",
        State: "",
        Title: "",
        key: "",
      },
      Value: [],
      Jvalue: [],
      data: [
        {
          key: 1,
          Title: '东西真不错',
          State: "已发布",
          Time: '2022-09-19 9:39:39',
          remarks: '--',

        },
        {
          key: 2,
          Title: '国庆节活动页面2',
          State: "未完成",
          Time: '2022-09-19 9:39:39',
          remarks: '--',

        },
        {
          key: 3,
          Title: '国庆节活动页面3',
          State: "已发布",
          Time: '2022-09-19 9:39:39',
          remarks: '--',

        },
        {
          key: 4,
          Title: '国庆节活动页面4',
          State: "已发布",
          Time: '2022-09-19 9:39:39',
          remarks: '--',

        },
        {
          key: 5,
          Title: '国庆节活动页面5',
          State: "已发布",
          Time: '2022-09-19 9:39:39',
          remarks: '--',

        },
        {
          key: 6,
          Title: '国庆节活动页面6',
          State: "已发布",
          Time: '2022-09-19 9:39:39',
          remarks: '--',

        },
        {
          key: 7,
          Title: '国庆节活动页面7',
          State: "未完成",
          Time: '2022-09-19 9:39:39',
          remarks: '--',

        },

        {
          key: 8,
          Title: '国庆节活动页面8',
          State: "已发布",
          Time: '2022-09-19 9:39:39',
          remarks: '--',

        },
        {
          key: 9,
          Title: '国庆节活动页面9',
          State: "已发布",
          Time: '2022-09-19 9:39:39',
          remarks: '--',

        },
      ],
      columns: [
        {
          title: '页面标题',
          dataIndex: 'Title',
          key: '页面标题',
        },
        {
          title: '发布状态',
          dataIndex: 'State',
          key: '发布状态',
        },
        {
          title: '创建时间',
          dataIndex: 'Time',
          key: '创建时间',
        },
        {
          title: '备注',
          dataIndex: 'remarks',
          key: '备注',
        },

        {
          title: '操作',
          key: 'tag',
          render: (row, record, index) => (
            <span onClick={() => this.remove(row, record, index)}
            >
              <Button type="dashed" onClick={this.edit}>编辑</Button>
              <Popconfirm
                title="删除提示"
                description="确定删除该项吗?"
                onConfirm={this.confirm}
                onCancel={this.cancel}
                okText="确定"
                cancelText="取消"
              >
                <Button type="dashed" danger>删除</Button>
              </Popconfirm>

            </span>
          ),
        },
      ],
    }
  }
  // 编辑标题
  editBT = (e) => {
    this.setState({ Title: e.target.value })

  }
  // 编辑发布状态
  editZT = (sData) => {

    this.setState({ State: sData })

  }

  //编辑时间
  editRQ = (dData) => {
    if (dData === null) {
      this.setState(() => { return { Time: "" } },
        () => {

        })

    } else {
      this.setState(() => { return { Time: dData.$y + "年" + dData.$M + 1 + "月" + dData.$D + "日" + dData.$H + ":" + dData.$m + ":" + dData.$s } },
        () => {

        })

    }
  }


  //编辑备注
  editBZ = (e) => {
    this.setState(() => { return { remarks: e.target.value } },
      () => {

      }
    )
  }
  //编辑
  edit = () => {
    this.setState({ ModalOpen: true })

  }
  //编辑模态框确定
  editOk = () => {
    if (this.state.current === 1) {
      this.setState(() => {
        return {
          index: this.state.Index, ModalOpen: false,
          showData: {
            remarks: this.state.remarks,
            Time: this.state.Time,
            State: this.state.State,
            Title: this.state.Title,
            key: this.state.showData.key,
          },
          remarks: "",
          Time: "",
          State: "",
          Title: "",
        }
      },
        () => {
          this.setState({ data: this.state.data.splice(this.state.index, 1, this.state.showData) })
          this.setState({
            data: [...this.state.data],
            key: this.state.key + 1,

          })
        }
      )

    } else {
      this.setState(() => {
        return {
          index: this.state.Index + (this.state.current - 1) * this.state.pageSize, ModalOpen: false,
          showData: {
            remarks: this.state.remarks,
            Time: this.state.Time,
            State: this.state.State,
            Title: this.state.Title,
            key: this.state.showData.key,
          }
        }
      },
        () => {
          this.setState({ data: this.state.data.splice(this.state.index, 1, this.state.showData) })
          this.setState({
            key: this.state.key + 1,
            data: [...this.state.data],
            showData: {
              remarks: "",
              Time: "",
              State: "",
              Title: "",
            }
          })

        })
    }

  };
  //编辑模态框取消
  editCancel = () => {
    this.setState({ ModalOpen: false });
    this.setState({
      key: this.state.key + 1,
      TimeClear: true,
      remarks: "",
      Time: "",
      State: "",
      Title: "",
    })
  };
  //
  onFormLayoutChange = ({ size }) => {
    this.setState({ setComponentSize: size })


  };
  //打开模态框
  showModal = () => {
    // this.setState(() => { return { isModalOpen: true } },
    //   () => {
    //     console.log(this.state.isModalOpen);
    //   }
    // )
    this.setState({ isModalOpen: true })

    this.setState({
      key: this.state.key + 1,
    })

  };
  //新增模态框确定
  handleOk = () => {
    this.setState(() => {
      return {
        isModalOpen: false,
        showData: {
          key: this.state.key,
          Title: this.state.Title,
          State: this.state.State,
          Time: this.state.Time,
          remarks: this.state.remarks,
        },

      }
    },
      () => {

        this.setState({
          data: [...this.state.data, this.state.showData],
          key: this.state.key + 1,
          remarks: "",
          Time: "",
          State: "",
          Title: "",
        })

      }

    )

  };
  //新增模态框取消
  handleCancel = () => {
    this.setState({ isModalOpen: false });
    this.setState({
      key: this.state.key + 1,
      remarks: "",
      Time: "",
      State: "",
      Title: "",
    })
  };

  //下拉框
  handleChange = (value, e) => {
    this.setState({
      data: this.state.Jvalue
    })

    this.setState({
      Value: this.state.data
    })
    if (e.value === "已发布") {
      let keyword = value
      clearTimeout(window.timer)
      window.timer = setTimeout(() => {
        console.log(1);
        let data = this.state.Value.filter(r => r.State === keyword)
        if (data.length !== 0) {
          this.setState({
            data
          })

        }
      }, 10)
    }
    else if (e.value === "未发布") {

      let keyword = value
      clearTimeout(window.timer)
      console.log(2);
      window.timer = setTimeout(() => {

        let data = this.state.Value.filter(r => r.State === keyword)
        if (data.length !== 0) {
          this.setState({
            data
          })
        }
      }, 10)
    }
    else {

      this.setState({
        Jvalue: this.state.data
      })
    }


  };
  //搜索
  onSearch = (value) => {

    if (this.state.data === "") {
      this.setState({ data: this.state.Jvalue })
      console.log("1")
    }
    else {
      console.log("2")
      this.setState({
        Jvalue: this.state.data
      })
    }
    let keyword = value
    clearTimeout(window.timer)
    window.timer = setTimeout(() => {
      let data = this.state.data.filter(r => r.Title === keyword)
      if (data.length !== 0) {
        this.setState({
          data
        })
        console.log("这是第一个执行的")
      }
      else if (value.length > 0 && data.length === 0) {
        this.setState({
          data: ""
        })
        console.log("让我看看", this.state.Jvalue)
        console.log("这是第二个执行的")

      }
      else if (value.length === 0) {
        this.setState({
          data: this.state.Jvalue
        })
        console.log("这是第三个执行的")
      }

    }, 10)

  }

  //分页
  onShowSizeChange = (current, size) => {
    // console.log("当前页", current)
    // console.log("每页数据和pageSize一样", size)
    this.setState({ current: current })
    this.setState({ pageSize: size })
  }
  //分页
  onChange = (page, pageSize) => {
    // console.log("页码", page)
    // console.log("每页数据", pageSize)
    this.setState({ current: page })
    this.setState({ pageSize: pageSize })

  }
  // 删除成功提示
  confirm = () => {
    message.success('删除成功');
    if (this.state.current === 1) {
      this.setState(() => { return { index: this.state.Index } },
        () => {
          this.setState({ data: this.state.data.splice(this.state.index, 1) })
          let data = [...this.state.data]
          this.setState({ data })
          this.setState({
            key: this.state.key + 1,
          })
        }
      )

    } else {
      this.setState(() => {
        return { index: this.state.Index + (this.state.current - 1) * this.state.pageSize }
      },
        () => {
          this.setState({ data: this.state.data.splice(this.state.index, 1) })
          let data = [...this.state.data]
          this.setState({ data })

          this.setState({
            key: this.state.key + 1,
          })
        })
    }

  };
  //获取下标
  remove(row, record, index) {

    this.setState(() => {
      return {
        key: this.state.key + 1,
        showData: {
          key: row.key,
          Title: row.Title,
          State: row.State,
          Time: row.Time,
          remarks: row.remarks,
        },
        Title: row.Title,
        State: row.State,
        Time: row.Time,
        remarks: row.remarks,
      }
    }, () => {

    }


    )
    this.setState(() => { return { Index: index } },
      () => {

      })

  }
  //删除取消提示
  cancel = () => {
    message.error('取消删除');
    this.setState({
      key: this.state.key + 1,
    })
  };
  // 添加标题
  addBT = (e) => {

    if (e.target.value === null || this.state.Title === this.setState.Title) {
      this.setState(() => { return { State: "" } },
        () => {

        })

    } else {
      this.setState(() => { return { Title: e.target.value } },
        () => {

        })

    }

  }
  // 添加发布状态
  addZT = (sData) => {
    if (sData === null || this.state.State === this.setState.State) {
      this.setState(() => { return { State: "" } },
        () => {

        })

    } else {
      this.setState(() => { return { State: sData } },
        () => {

        })

    }
  }
  //添加创建时间
  addRQ = (dData) => {


    if (dData === null || this.state.Time === this.setState.Time) {
      this.setState(() => { return { Time: "" } },
        () => {

        })

    } else {
      this.setState(() => { return { Time: dData.$y + "年" + dData.$M + 1 + "月" + dData.$D + "日" + dData.$H + ":" + dData.$m + ":" + dData.$s } },
        () => {

        })

    }

  }


  //添加备注
  addBZ = (e) => {
    if (e.target.value === null || this.state.remarks === this.setState.remarks) {
      this.setState(() => { return { remarks: "" } },
        () => {

        })

    } else {
      this.setState(() => { return { remarks: e.target.value } },
        () => {

        })

    }
  }
  render() {
    let { TextArea } = Input;
    let { Search } = Input;
    let columns = this.state.columns
    let data = this.state.data
    return (
      <div style={{ backgroundColor: 'white', height: "100%", width: "100%", display: "flex", flexFlow: "column", alignItems: "center",  }}>
        <div style={{ width: "95%", height: "5%", display: "flex", margin: "20px 0", justifyContent: "space-between", alignItems: "center", backgroundColor: "#FFFFFF" }}>
          <Button type="primary" onClick={this.showModal} >新建页面
          </Button>
          <Modal title="新建页面" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel} >
            <Form
              labelCol={{
                span: 4,
              }}
              wrapperCol={{
                span: 14,
              }}
              layout="horizontal"
              initialValues={{
                size: this.state.componentSize,
              }}
              onValuesChange={this.onFormLayoutChange}

            >

              <Form.Item label="页面标题" onChange={this.addBT}  >
                <Input value={this.state.Title} />
              </Form.Item>
              <Form.Item label="发布状态" onChange={this.addZT} >
                <Select
                  value={this.state.State}
                  defaultValue="未发布"
                  style={{
                    width: 120,
                  }}

                  onChange={this.editZT}
                  options={[
                    {
                      value: '未发布',
                      label: '未发布',
                    },
                    {
                      value: '已发布',
                      label: '已发布',
                    },
                  ]}
                />
              </Form.Item>

              <Form.Item label="创建日期" locale={locale}  >
                <DatePicker
                  format="YYYY-MM-DD"
                  onChange={this.addRQ}
                />
              </Form.Item>
              <Form.Item label="备注" onChange={this.addBZ} >
                <TextArea rows={4} value={this.state.remarks} />
              </Form.Item>
            </Form>
          </Modal>
          <Modal title="修改页面" open={this.state.ModalOpen} onOk={this.editOk} onCancel={this.editCancel} >
            <Form
              labelCol={{
                span: 4,
              }}
              wrapperCol={{
                span: 14,
              }}
              layout="horizontal"
              initialValues={{
                size: this.state.componentSize,
              }}
              onValuesChange={this.onFormLayoutChange}

            >

              <Form.Item label="页面标题" onChange={this.editBT}>
                <Input value={this.state.Title} />
              </Form.Item>
              <Form.Item label="发布状态" onChange={this.editZT} >
                <Select
                  value={this.state.State}
                  defaultValue="未发布"
                  style={{
                    width: 120,
                  }}

                  onChange={this.editZT}
                  options={[
                    {
                      value: '未发布',
                      label: '未发布',
                    },
                    {
                      value: '已发布',
                      label: '已发布',
                    },
                  ]}
                />
              </Form.Item>

              <Form.Item label="修改日期" locale={locale}  >
                <DatePicker
                  onChange={this.editRQ}


                />
              </Form.Item>
              <Form.Item label="备注"  >
                <TextArea rows={4} onChange={this.editBZ} value={this.state.remarks} />
              </Form.Item>
            </Form>
          </Modal>
          <div> <Select
            optionFilterProp="children"
            filterOption={(input, option) =>
              console.log(input, option)
                (option?.label ?? '').toLowerCase().props.children.includes(input.toLowerCase()) >= 0
            }
            showSearch
            onSearch={this.onSearch}
            defaultValue="全部状态"
            style={{ width: 120 }}
            onChange={this.handleChange}
            options={[
              {
                value: '全部状态',
                label: '全部状态',
              },
              {
                value: '已发布',
                label: '已发布',
              },

              {
                value: '未发布',
                label: '未发布',
              },
            ]}
          />
            <Search
              placeholder="输入搜索内容"
              onSearch={this.onSearch}
              style={{
                width: 200,
              }}
            />
          </div>
        </div>
        <div style={{ width: "95%", height: "50%", display: "flex", flexWrap: "wrap", }}>
          <Table style={{ width: "100%", }}
            columns={columns} dataSource={data}
            // sortDirections="ascend"
            pagination={{
              position: ['bottomLeft'],
              total: data.length,
              defaultCurrent: 1,
              defaultPageSize: 4,
              pageSizeOptions: [1, 2, 3, 4],
              showTotal: () => `总共 ${data.length} 数据`,
              onShowSizeChange: this.onShowSizeChange,
              onChange: this.onChange,
              pageSize: this.pageSize,
              showSizeChanger: true,
              showQuickJumper: true,
            }} />
        </div>
      </div>
    )
  }
}
